<template>
	<view class="page">
		<image class="header-bg" :src="common.apiHost+'weappImg/bg_03.png'" mode="widthFix"></image>
		
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">您的问题</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="formData.title" type="text" placeholder="请输入您的问题" placeholder-class="placeholder-class" />
				</view>
			</view>
			
			<view class="form-group form-group__text">
				<textarea class="form-group__from" v-model="formData.question" :placeholder="placeholder" placeholder-class="placeholder-class" />
			</view>
			
			<view class="form-group form-group__upload">
				<view class="form-group__title">上传相关图片</view>
				<view class="form-group__con">
					<view class="upload-item">
						<u-upload :action="action" @on-uploaded="onUploaded"></u-upload>
					</view>
				</view>
			</view>
			
		</view>
		<view class="circular-submit" @click="formSubmit">立即提交</view>
		
		<view class="record link" @click="$link('/pagesMine/wzList')">
			<text>问诊记录</text>
			<u-icon name='arrow-right' size='20' color='#0bbf68'></u-icon>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		
		data() {
			return{
				common,
				placeholder: '请详细描述问题，如宠物种类，受伤原因，受伤情况等，以便我们更好的为您回答',
				formData: {
					title: '',
					question: '',
					imgArray: ''
				},
				action: common.apiHost + common.uploadPath,
				fileList: []
			}
		},
		
		methods: {
			// 图片上传
			onUploaded(res) {
				const that = this
				res = res || []
				let temp = []
				if(res.length > 0) {
					res.map(item => {
						let imgPath = item.response.result.result
						temp.push(imgPath)
					})
				}
				that.fileList = temp
				this.formData.imgArray = temp.join(',')
			},
			
			formSubmit() {
				let formData = this.formData
				if(!formData.title) { this.$showToast('请填写标题~'); return false }
				if(!formData.question) { this.$showToast('请填写问题内容~'); return false }
				api.saveOnlineConsultation(formData, res => {
					this.$link('/pagesMain/wz/success?id='+res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-bg{
		width: 100%;
	}
	.ql-container{
		padding: 20upx 0;
		height: 250upx;
		box-sizing: border-box;
		min-height: initial;
	}
	.form-group__upload{
		border-bottom: 1px solid $border-color !important;
	}
	.record{
		text-align: center;
		font-weight: bold;
		color: $theme-color;
		@include  flex-base;
		justify-content: center;
		margin-top: 50upx;
	}
</style>
